<template>
  <div class="salesMain">
    <el-card>
      <div slot="header" class="header">
        <el-menu mode="horizontal" :default-active="activeIndex" @select="handleMenuSelect" class="menuStyle">
          <el-menu-item index="1">销售额</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>
        <div class="headerRight">
          <el-radio-group
          v-model="radioModel"
          @change="handleRadioChange"
          size="small"
          :style="{marginRight: '20px'}"
          >
            <el-radio-button label="今日"></el-radio-button>
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="今年"></el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="pickerValue"
            type="daterange"
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            unlink-panels
            >
          </el-date-picker>
        </div>
      </div>
      <div>
        321
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1',
      radioModel: '今日',
      pickerValue: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end], true)
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    handleMenuSelect (index) {
      this.activeIndex = index
    },
    handleRadioChange (label) {
      this.radioModel = label
    }
  }
}
</script>

<style lang="scss" scoped>
.salesMain {
  margin-top: 20px;
  .header {
    display: flex;
    align-items: center;
    position: relative;
    .headerRight {
      display: flex;
      align-items: center;
      position: absolute;
      right: 30px;
    }
    .menuStyle {
      padding-left: 50px;
      width: 100%;
      height: 100%;
      .el-menu-item {
        height: 51px;
        line-height: 51px;
      }
    }
  }
}
</style>
